<template>
  <div class="box">
    <mainHead ref="mainhead" :showHead="false"></mainHead>
    <tools></tools>
    <div class="tou">
      <img class="img" :src="backgroundImage" />
      <div class="tit">
        <div class="ceng"></div>
        <div class="tit_1">
          <router-link to="/"><img class="div1" src="../../assets/floor_t.png" alt /></router-link>

          <div class="divdw">
            <img class="divdw_img" src="../../assets/bbcz/zydw01.png" alt="" />
            <span class="divdw_span">{{ location }}</span>
          </div>
          <div class="div4">
            <router-link to="/" style="margin-right:32px;">首页</router-link>
            <template v-if="!loginstate">
              <img class="div5" src="../../assets/tou.png" style="vertical-align: text-top;" />
              <span style="margin-right: 40px" @click="login">登录</span>
              <span @click="tou_zhuce">注册</span>
            </template>
            <template v-else>
              <div @click="toRouter(1)" style="margin-right:32px">我要发布</div>
              <div style="margin-right:32px" @click="toRouter(2)"
                v-if="(user.isShop == 0 && user.isAgent == 0) || !loginstate">
                企业认证
              </div>
              <div style="margin-right:32px" @click="toRouter(3)"
                v-if="!user.enterpriseRecruitmentStatus && (user.isAgent == 0 || !loginstate)">
                销售顾问认证
              </div>
              <div style="margin-right:32px" class="relative downapp">
                下载APP
                <div class="erweima-wrap">
                  <div class="erweima">
                    <div>
                      <img src="@/assets/android.png" /><span>安卓</span>
                    </div>
                    <div>
                      <img src="@/assets/iosDown.png" /><span>IOS</span>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="div5 " @click="toRouter(5)"
                  style="margin-left: 0;margin-right: 24px;position: relative;width: auto;display: inline-block;">
                  消息
                  <span class="msg-count">{{
                    msgCount > 99 ? "99+" : msgCount > 0 ? msgCount : ""
                  }}</span>
                </div>
                <img class="div5" style="vertical-align: text-top;margin-right:4px" :src="user.image"
                  @click="toUser(loginstate)" v-if="user.image" />
                <img class="div5" style="vertical-align: text-top;margin-right:4px" src="../../assets/tou.png"
                  @click="toUser(loginstate)" v-else />
                <span style="margin-right: 40px" @click="toUser(loginstate)">我的</span>
                <span @click="loginout">退出</span>
              </div>
            </template>
          </div>
          <div class="div6">
            <span style="margin-right: 40px" @click="ToJump('optionsAvailable')">车源信息</span>
            <span style="margin-right: 40px" @click="ToJump('dealer')">经销商</span>
            <span style="margin-right: 40px" @click="ToJump('ownerService')">车主服务</span>
            <span @click="ToJump('mapCar')">地图找车</span>
          </div>
          <div class="div7">
            <input type="text" placeholder="请输入关键字开始找车" v-model="searchtext" @keyup.enter="search" />
            <p class="el-icon-search" @click="search()"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="zhong">
      <div class="swiper-btn-control-wrap">
        <div class="swiper-btn-control btn-control1" @click.stop="prev">
          <span class="el-icon-arrow-left btn-control"></span>
        </div>
        <div class="swiper-btn-control btn-control2" @click.stop="next">
          <span class="el-icon-arrow-right btn-control"></span>
        </div>
        <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper">
          <div @click="chooseItem(item, index)" v-for="(item, index) in imgs" :style="config5[index]" :key="item.cover"
            @mouseover="swiper = false" @mouseleave="swiper = true" class="swiperclass">
            <img :src="item.cover" style="width: 100%; height: 100%; cursor: pointer" @click="chooseItem(item, index)" />
          </div>
          <div class="swiper-button-prev" @click="prev" style="color: '#64b6a8!important'"></div>
          <div class="swiper-button-next" @click="next" style="color: '#64b6a8!important'"></div>
        </div>
      </div>

      <div class="kandian">
        <!-- <img src="../../assets/kandian2.png" @click="ToJump('watching')" />
        <div class="list">
          <div class="li" v-for="(item, index) in WatchList" :key="index" style="cursor: pointer"
            @click="toWatching(item.id)">
            {{ item.title }}
          </div>
        </div>
        <div class="gengduo" style="cursor: pointer">
          <span @click="ToJump('watching')">查看更多</span>
          <img src="../../assets/duo.png" />
        </div> -->
        <img src="../../assets/bbcz/zybyq01.png" @click="ToJump('friendsCircle')" />
        <div class="list">
          <div class="li" v-for="(item, index) in WatchList" :key="index" style="cursor: pointer"
            @click="toWatching(item.id)">
            {{ item.content }}
          </div>
        </div>
        <div class="gengduo" style="cursor: pointer">
          <span @click="ToJump('friendsCircle')">查看更多</span>
          <img src="../../assets/duo.png" />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="tit">
        <div class="tit_item" @click="titClick(1)" :class="titChage == 1 ? 'active' : ''">
          精选车源
        </div>
        <div class="tit_item" @click="titClick(2)" :class="titChage == 2 ? 'active' : ''">
          精选服务
        </div>
      </div>
      <div class="list">
        <template v-if="titChage == 1">
          <div class="li" v-for="(item, index) in HousesList" :key="index">
            <img class="biao" @click="details(item)" style="
                object-fit: contain;
                cursor: pointer;
                background-color: #00000033;
              " :src="item.vehicleCoverPicture
                ? item.vehicleCoverPicture
                : $img + item.houseImageDiv
                " />

            <div class="name" @mouseleave="chuqu(item)" @mouseenter="jiaruJin1(item)">
              <div class="t_1" style="cursor: pointer; color: #333" @click="details(item)">
                <tag-view :item="item"></tag-view>
                {{
                  item.vehicleBrandModel
                  ? (item.vehicleBrandModel.split("|")[0] || "") +
                  " " +
                  (item.vehicleBrandModel.split("|")[1] || "")
                  : ""
                }}
                {{ item.model ? item.model + "/" : "" }}
                {{
                  item.bodyStructureDoors +
                  "门" +
                  item.bodyStructureSeat +
                  "座" +
                  item.bodyStructureVehicle +
                  "车"
                }}
              </div>
              <img class="t_1_1" v-if="jiaruXuan1 == item && !item.houseContrast" @click.stop="jiaruChu1(item.id)"
                src="../../assets/duibi1.png" />
              <img class="t_1_1" v-if="jiaruXuan1 == item && item.houseContrast" @click.stop="duibiqx(item.id)"
                src="../../assets/qxduibi.png" />
              <div class="t_2" style="cursor: pointer" @click="details(item)">
                <span style="margin-right: 5px">{{
                  item.mileage
                  ? +item.mileage >= 10000
                    ? +(item.mileage / 10000).toFixed(1) + "万公里/"
                    : item.mileage + "公里/"
                  : ""
                }}{{
  item.licensingTimeYear ? item.licensingTimeYear + "年" : ""
}}</span>
              </div>
              <div class="t_4">
                <img style="cursor: pointer" @click="toAgent(item)" :src="item.userInformation
                    ? item.userInformation.image ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " />
                <span @click="toAgent(item)" style="cursor: pointer">{{
                  item.userInformation
                  ? item.userInformation.nikeName || "未命名用户"
                  : "未命名用户"
                }}</span>
                <div @click="shopdetails(item)" style="cursor: pointer">
                  {{
                    item.distributor ? item.distributor.storeName : "个人车源"
                  }}
                </div>
              </div>
            </div>
            <div class="qian">
              <p class="p1">
                {{
                  item.intervalPrice && item.intervalPrice != ""
                  ? item.intervalPrice.indexOf("-") > -1
                    ? item.intervalPrice.split("-")[0] +
                    "万-" +
                    item.intervalPrice.split("-")[1] +
                    "万"
                    : ""
                  : item.price + "万"
                }}
              </p>
            </div>
          </div>
        </template>
        <template v-else-if="titChage == 2">
          <div class="li" v-for="(item, index) in HousesList" :key="index">
            <img class="biao" @click="detail(item)" style="
                object-fit: contain;
                cursor: pointer;
                background-color: #00000033;
              " :src="item.coverPhoto ? item.coverPhoto : $img + item.houseImageDiv
                " />
            <div class="fwxm">
              <div class="t_1" style="cursor: pointer" @click="detail(item)">
                {{ item.entryName }}
              </div>
              <div class="t_2 " style="cursor: pointer" @click="detail(item)">
                <span style="margin-right: 5px" class="line7">{{
                  item.entryDescription
                }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="fenye">
      <el-pagination @current-change="HousesCurrentChange" background layout="prev, pager, next" :total="Housestotal"
        :current-page="HousesPage.PageNo" :page-size="HousesPage.pageSize"></el-pagination>
    </div>
    <floor></floor>
    <chat ref="chats"></chat>
    <login ref="login" @succer="loginsucces"></login>
    <div v-if="confirm" style="
        width: 100%;
        height: 100%;
        background-color: #999999;
        opacity: 0.5;
        z-index: 9999;
        position: fixed;
        top: 0px;
      "></div>
    <div v-if="confirm" style="
        position: fixed;
        z-index: 99999;
        width: 400px;
        height: 150px;
        align-items: center;
        justify-content: space-between;
        padding: 30px 0px;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 10px;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        display: flex;
        flex-direction: column;
      ">
      <div style="color: #000000; font-size: 24px; font-weight: 400">
        商家已将您标记为离职，是否同意？
      </div>
      <div style="display: flex; justify-content: space-between; width: 200px">
        <div style="
            cursor: pointer;
            padding: 5px 20px;
            color: #64b6a8;
            font-size: 20px;
            border-radius: 20px;
            border: #64b6a8 2px solid;
          " @click="agreelz(1)">
          稍后
        </div>
        <div style="
            cursor: pointer;
            padding: 5px 20px;
            color: #ffffff;
            font-size: 20px;
            border-radius: 20px;
            background-color: #64b6a8;
          " @click="agreelz(2)">
          同意
        </div>
      </div>
    </div>
    <div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);;">
      <img src="@/assets/top.png" />返回顶部
    </div>
  </div>
</template>

<script>
// import "swiper/swiper-bundle.css";
import floor from "../../components/floor";
import tools from "../../components/tools";
import login from "../../components/login.vue";
import uploadvideo from "../../components/uploadVideo.vue";
import chat from "../../components/chat";
import BbczItem from "./comp/bbcz-item.vue";
import mainHead from "../../components/head.vue";
import { mapState } from "vuex";
export default {
  name: "index",
  components: {
    floor,
    login,
    uploadvideo,
    chat,
    tools,
    BbczItem,
    mainHead
  },
  data() {
    return {
      jiaruXuan: "",
      jiaruXuan1: "",
      loginstate: false,
      msg: "",
      text: "向右滑",
      accuracy: 1, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      searchtext: "",
      // ce: false,
      zbc: false,
      con: false,
      con1: false,
      con2: false,
      zhanghao: false,
      userInfo: "",
      // 登录，注册变量
      zhuce_xy: "",
      phone: "",
      password: "",
      phoneCode: "",
      wxOpenid: "",
      image: "",
      nikeName: "",
      zfbOpenid: "",
      pdOpenid: "",
      setIntervalNum: "",
      yzm: "获取验证码",
      shijian: 60,
      show: false,
      text: "",
      //房源信息参数
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        upStatus: 1,
        isShow: 1,
        examineStatus: 2,
        isLz: "0",
        orderSort: "1"
      },
      Housestotal: 0,
      HousesList: [],

      //看点信息
      WatchList: [],
      //轮播图
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,
      config5: [
        {
          id: "-A",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "-22%",
          opacity: 0,
          zIndex: 0,
          transition: ".4s"
        },
        {
          id: "A",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "0%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "82%",
          top: "14%",
          left: "13%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "45%",
          height: "100%",
          top: "0px",
          left: "50%",
          marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "82%",
          top: "14%",
          left: "59%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "78%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "E+",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "100%",
          opacity: 0,
          zIndex: 0,
          transition: ".4s"
        }
      ],
      user: {},
      loc: {},
      bannerList: [],
      confirm: false,
      t1: "",
      swiper: true,
      backgroundImage: "",
      isshow: false,
      location: "",
      titChage: 1
    };
  },
  filters: {
    hidePhone(phone) {
      return phone.substring(0, 3) + "***" + phone.substring(phone.length - 2);
    }
  },
  mounted() {
    this.t1 = setInterval(() => {
      if (this.swiper) {
        this.next();
      }
    }, 4000);
    this.$bus.$off("dj");
    this.$bus.$on("dj", () => {
      this.loginout();
    });
  },
  beforeDestroy() {
    clearInterval(this.t1);
  },
  computed: {
    ...mapState({
      msgCount: state => state.msgCount
    }),
    price(price) {
      return (price / 10000).toFixed(2);
    },
    UnitPrice(price, area) {
      return (price / area).toFixed(2);
    }
  },
  created() {
    this.initMap();
    this.init();
    this.getData();
    this.centerCard(); // 获取中间卡片信息
    this.addCardStyle(); // 加入样式位置的index
    // this.Tamp()
    this.homePageBackground();
  },
  methods: {
    toRouter(i) {
      console.log(this.$refs.mainhead);
      this.$refs.mainhead.setOpen(i);
    },
    titClick(index) {
      // this.Housestotal=10
      // this.HousesPage={
      //   pageNo:1,
      //   pageSize:10
      // }
      this.HousesPage.pageNo = 1;
      this.titChage = index;
      this.HousesList = [];
      this.getHomePageListByConditions(this.titChage);
    },
    // 获取定位
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: "jsonp"
      };
      this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", data).then(
        data => {
          this.location = data.result.ad_info.city;
        }
      );
    },
    // 主页后面背景图
    homePageBackground() {
      // this.$getHttp('/mob/home/getBackgroundImage',).then(res=>{
      //   this.backgroundImage=res.data[0].backgroundImage
      // })
      this.$getHttp("/mob/home/getBanner", { type: 15 }).then(data => {
        if (data.code == 200) {
          this.backgroundImage = data.list[0].image;
        }
      });
    },
    Tamp() {
      window.addEventListener(
        "message",
        function (event) {
          if (event.data) {
            this.loc = event.data;
            if (this.loc) {
              console.log(this.loc);
            }
          }
        },
        false
      );
      setTimeout(function () {
        if (!this.loc) {
          console.log("定位超时");
        }
      }, 6000);
    },
    init() {
      this.getUser(); //判断是否登录
      this.getHomePageListByConditions(this.titChage);
      this.getWatch();
      this.getBanner();
    },
    // 车务主页数据列表
    getHomePageListByConditions(category) {
      this.$getHttp("/api/mobile/vehicleOwner/getHomePageListByConditions", {
        category: category + "",
        pageNo: this.HousesPage.pageNo,
        pageSize: this.HousesPage.pageSize
      }).then(data => {
        // 加载房源对比
        const contrastIdList = JSON.parse(
          localStorage.getItem("contrastIdList-cz")
        );
        //处理楼层信息
        data.homePageList.pageList.forEach(e => {
          if (contrastIdList != null) {
            e.houseContrast = false;
            contrastIdList.forEach(el => {
              if (el == e.id) {
                e.houseContrast = true;
              }
            });
          }
          if (e.hasOwnProperty("floor")) {
            if (e.floor.indexOf("|") == -1) {
              e.foors = "";
            } else {
              e.foors =
                e.floor.split("|")[0] +
                "层/" +
                "共" +
                e.floor.split("|")[1] +
                "层";
            }
          }
          if (!e.hasOwnProperty("shop_name")) {
            e.shop_name = "个人房源";
          }
          if (e.hasOwnProperty("createDate")) {
            e.showYear = new Date(e.createDate || e.updateDate).getFullYear();
          }
        });
        // data.homePageList.pageList.sort(function (a, b) {
        //   console.log(
        //     a.update_date || a.create_date - b.update_date || b.create_date
        //   );
        //   return (
        //     (b.update_date || b.create_date) - (a.update_date || a.create_date)
        //   );
        // });
        this.HousesList = data.homePageList.pageList;
        this.Housestotal = data.homePageList.pageCount;
      });
    },

    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;

        //查询是否被标记离职
        if (localStorage.getItem("confirm") == "true") {
          if (user.businessType == 1) {
            this.$getHttp("/mob/user/isMarkResignation", {
              userId: user.id
            }).then(data => {
              if (data.code == 200) {
                this.confirm = data.confirm;
              }
            });
          } else {
            this.$getHttp(
              "/api/mobile/vehicleOwner/getWhetherMarkResignationByUserId",
              { userId: user.id }
            ).then(data => {
              if (data.code == 200) {
                this.confirm = data.confirm;
              }
            });
          }
        }
        // this.$getHttp('/mob/user/isMarkResignation',{userId:user.id}).then((data) =>{
        // 	if(data.code == 200){
        // 		this.confirm = data.confirm
        // 	}
        // })
      } else {
        this.loginstate = false;
      }
    },

    //获取今日看点
    getWatch() {
      // this.$getHttp("/mob/home/getWatch", { pageSize: 2, pageNo: 1 }).then(
      //   data => {
      //     console.log(data);
      //     if (data.code == 200) {
      //       this.WatchList = data.list;
      //     }
      //   }
      // );
      this.$getHttp("/api/mobile/vehicleOwner/queryHelpingFriendsCircleList", {
        pageNo: this.HousesPage.pageNo,
        pageSize: this.HousesPage.pageSize,
        publisherId: ""
      }).then(data => {
        //auditStatus  string审核状态（0：待审核，1：已通过，2：已拒绝）
        if (data.code == 200) {
          this.WatchList = data.helpingFriendsCircleList.pageList
            .filter(item => item.content != "" && item.content.length > 6)
            .slice(0, 3);

          // this.ceshiArr = data.helpingFriendsCircleList.pageList;
          // this.housetotal = data.helpingFriendsCircleList.pageCount;
          // console.log('this.ceshiArr',this.ceshiArr)
        }
      });
    },
    //获取首页广告
    getBanner() {
      this.$getHttp("/api/mobile/vehicleOwner/getCarouselChartsByType", {
        carouselType: "2",
        type: "2"
      }).then(data => {
        if (data.code == 200) {
          data.carouselChartsList.pageList.forEach(e => {
            this.bannerList.push(e);
            this.imgs.push({
              index: e.sort - 1,
              cover: e.picturePath
            });
          });
          this.addCardStyle();
        }
      });
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    ToJump(type) {
      const routeLink = this.$router.resolve({
        path: type
      });
      window.open(routeLink.href, "_blank");
    },
    // toUser() {
    //   if (this.loginstate) {
    //     //查询最新用户信息
    //     this.$getHttp("/mob/login/getUserInfoByPhone", {
    //       phone: JSON.parse(localStorage.getItem("userInfo")).phone,
    //     }).then((data) => {
    //       if (data.code == 200) {
    //         localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
    //       }
    //     });
    //     this.$router.push("/my/personal");
    //   } else {
    //     this.$message({
    //       message: "请登录！",
    //       type: "error",
    //       offset: 120,
    //       duration: 2000,
    //     });
    //   }
    // },
    //同意离职
    agreelz(type) {
      //稍后处理
      if (type == 1) {
        localStorage.setItem("confirm", false);
        this.confirm = false;
      } else {
        var url;
        if (this.user.businessType == 1) {
          url = "/mob/user/confirmResignation";
        } else if (this.user.businessType == 2) {
          url = "/api/mobile/vehicleOwner/confirmResignation";
        }
        this.$postHttp(url, {
          userId: this.user.id
        }).then(data => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
            this.confirm = false;
            localStorage.setItem("confirm", false);
          }
        });
      }
    },
    //修改每页显示条数
    // HousesSizeChange(e){
    //   this.HousesPage.pageSize = e
    //   this.getHouseInfo()
    // },
    //页数改变时触发
    HousesCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.HousesPage.pageNo = e;
      this.HousesList = [];
      this.getHomePageListByConditions(this.titChage);
    },
    searchCurrentChange(e) {
      this.searchPage.pageNo = e;
      this.searchList = [];
      this.getSearchInfo();
    },
    detail(item) {
      this.openUrl({
        path: "/index/serviceDetails",
        query: {
          id: item.id
        }
      });
    },
    details(item) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id
        }
      });
    },
    login() {
      this.$refs.login.login();
    },
    tou_zhuce() {
      this.$refs.login.tou_zhuce();
    },
    loginout() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("contrastIdList-cz");
      localStorage.removeItem("confirm");
      this.getUser();
    },
    loginsucces(e) {
      if (e) {
        this.getUser();
      }
    },
    search() {
      if (this.searchtext.trim() != "") {
        const routeLink = this.$router.resolve({
          path: "/index/vehicleSeach?search=" + this.searchtext + "&index=2"
        });
        window.open(routeLink.href, "_blank");
      }
    },
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      console.log("滑动");
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      this.centerIndex("next");
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      // this.endY = event.changedTouches[0].clientY;
      // this.endX = event.changedTouches[0].clientX;
      //this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log("左边滑动");
        if (this.startX > this.endX + 40) {
          this.next();
        }
      } else {
        console.log("右边滑动");
        if (this.endX > this.startX + 40) {
          this.prev();
        }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    // 点击
    chooseItem(item, index) {
      console.log(item, index);
      this.bannerList.forEach(el => {
        if (item.cover == el.picturePath) {
          el.bid = 2;
          localStorage.setItem("banner", JSON.stringify(el));
          // this.$router.push({
          //   path: "/index/particulars",
          //   query: {
          // 		type:'banner'
          //   },
          // });
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner"
          });
          window.open(routeLink.href, "_blank");
        }
      });

      // let cycles = item.index;
      // if (item.index < 3) {
      //   for (let i = 0; i < 3 - cycles; i++) {
      //     console.log(item.index);
      //     this.prev();
      //   }
      //   console.log("1");
      // } else if (item.index > 3) {
      //   for (let i = -1; i < item.index - 3; i++) {
      //     this.next();
      //   }
      //   console.log("2");
      // } else if (item.index == 3) {
      // 	this.imgs.forEach((e) =>{
      // 		if(e.index == 3){
      // 			this.bannerList.forEach((el) =>{
      // 				if(e.cover == (this.$img+el.image)){
      // 					localStorage.setItem("banner",JSON.stringify(el))
      // 					this.$router.push({
      // 					  path: "/index/particulars",
      // 					  query: {
      // 							type:'banner'
      // 					  },
      // 					});
      // 				}
      // 			})
      // 		}
      // 	})

      //   console.log("3");
      // }
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
      // this.$emit('centerInfo', this.centerInfo);
      // console.log(this.imgs[2].id);
    },

    addCardStyle() {
      if (this.imgs.length > 7) {
        let addtime = this.imgs.length - 7;
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s"
          });
        }
      }
    },
    banner() {
      console.log("跳转");
    },

    shopdetails(item) {
      if (item.shopName || item.storeName || item.distributor) {
        this.openUrl({
          path: "/index/newDealerDetails",
          query: {
            id: item.storeId
          }
        });
      } else {
        this.$message({
          message: "个人车源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    toWatching(id) {
      // this.$router.push({
      //   path: "/index/particulars",
      //   query: {
      //     id: id,
      //     type: "watch"
      //   }
      // });
      this.openUrl({
        path: "/my/friendsCircleDetails",
        query: {
          id: id
        }
      });
    },
    jiaru(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.jiaruduibi(id);
    },
    jiaruJin(num) {
      this.jiaruXuan = num;
    },
    jiaruChu() {
      this.jiaruXuan = "";
    },
    jiaruJin1(num) {
      if (num) {
        this.jiaruXuan1 = num;
        this.isshow = true;
      }
    },
    chuqu() {
      this.jiaruXuan1 = "";
      this.isshow = false;
    },
    jiaruChu1(id) {
      if (!localStorage.getItem("userInfo")) {
        this.myErrorMessage("请登录");
        return;
      }
      this.jiaruXuan1 = "";
      this.jiaruduibi(id);
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation(); //阻止冒泡
    },
    jiaruduibi(id) {
      let contrastIdList = JSON.parse(
        localStorage.getItem("contrastIdList-cz")
      );
      if (contrastIdList && contrastIdList.length >= 4) {
        this.$message({
          message: "最多4辆进行对比",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (contrastIdList == null) {
        let list = [id];
        localStorage.setItem("contrastIdList-cz", JSON.stringify(list));
      } else {
        contrastIdList.push(id);
        localStorage.setItem(
          "contrastIdList-cz",
          JSON.stringify(contrastIdList)
        );
      }
      this.HousesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = true;
        }
      });
      this.$message({
        message: "已加入对比！",
        type: "success",
        offset: 120,
        duration: 2000
      });
    },
    quxiaoduibi(id) {
      let contrastIdList = JSON.parse(
        localStorage.getItem("contrastIdList-cz")
      );
      for (var i = 0; i < contrastIdList.length; i++) {
        if (contrastIdList[i] == id) {
          contrastIdList.splice(i, 1);
        }
      }
      localStorage.setItem("contrastIdList-cz", JSON.stringify(contrastIdList));
      this.HousesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = false;
        }
      });
      this.$message({
        message: "已取消对比！",
        type: "error",
        offset: 120,
        duration: 2000
      });
    },
    duibiqx(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.quxiaoduibi(id);
    }
  }
};
</script>
<style lang="less" scoped>
.swiperclass {
  margin-top: 10px;
  box-shadow: 0px 0px 10px 8px rgba(181, 181, 181, 0.3);
}

/deep/ .el-message--danger {
  color: red !important;

  .el-message__content {
    color: red !important;
  }
}

/deep/.el-message--danger {
  color: blue !important;
}

.el-message--danger {
  color: yellow !important;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;

  .con {
    position: absolute;
    width: 470px;
    height: 540px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-icon-close {
      position: absolute;
      color: #999999;
      top: 25px;
      right: 30px;
      font-size: 25px;
      cursor: pointer;
    }

    .d1 {
      position: absolute;
      top: 47px;
      left: 60px;
      font-size: 26px;
      font-weight: 600;
      color: #64b6a8;
    }

    .d2 {
      position: absolute;
      top: 58px;
      right: 60px;
      color: #999999;

      span {
        color: #64b6a8;
        border-bottom: 1px solid #64b6a8;
      }
    }

    input {
      width: 350px;
      font-size: 18px;
      line-height: 25px;
      margin-left: 60px;
      margin-bottom: 30px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
    }

    .input1 {
      margin-top: 140px;
    }

    .input_p {
      position: absolute;
      right: 60px;
      bottom: 43px;
      color: #64b6a8;
      font-size: 18px;
      cursor: pointer;
    }

    .xieyi {
      position: relative;
      width: 348px;
      margin-left: 60px;

      .p {
        width: 348px;
        font-size: 18px;
        color: #666;
        text-indent: 36px;
        line-height: 28px;

        span {
          color: #64b6a8;
        }
      }

      .el-checkbox {
        position: absolute;
      }

      /deep/.el-checkbox__inner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 6px;
        height: 13px;
        left: 9px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }

    .queding {
      width: 350px;
      height: 48px;
      line-height: 48px;
      margin-left: 60px;
      text-align: center;
      background-color: #64b6a8;
      border-radius: 24px;
      margin-top: 30px;
      font-size: 21px;
      cursor: pointer;
    }

    .xuan {
      opacity: 0.5;
    }
  }

  .con1 {
    position: absolute;
    width: 470px;
    height: 650px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-icon-close {
      position: absolute;
      color: #999999;
      top: 25px;
      right: 30px;
      font-size: 25px;
      cursor: pointer;
    }

    .d1 {
      position: absolute;
      top: 47px;
      left: 60px;
      font-size: 26px;
      font-weight: 600;
      color: #64b6a8;
    }

    input {
      width: 350px;
      font-size: 18px;
      line-height: 25px;
      margin-left: 60px;
      margin-bottom: 30px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
    }

    .input1 {
      margin-top: 140px;
    }

    .input_p {
      position: absolute;
      right: 60px;
      bottom: 43px;
      color: #64b6a8;
      font-size: 18px;
      cursor: pointer;
    }

    .xieyi {
      position: relative;
      width: 348px;
      margin-left: 60px;

      .p {
        width: 348px;
        font-size: 18px;
        color: #666;
        text-indent: 36px;
        line-height: 28px;

        span {
          color: #64b6a8;
        }
      }

      .el-checkbox {
        position: absolute;
      }

      /deep/.el-checkbox__inner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 6px;
        height: 13px;
        left: 9px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }

    .queding {
      width: 350px;
      height: 48px;
      line-height: 48px;
      margin-left: 60px;
      text-align: center;
      background-color: #64b6a8;
      border-radius: 24px;
      margin-top: 30px;
      font-size: 21px;
      cursor: pointer;
    }

    .xuan {
      opacity: 0.5;
    }

    .d {
      display: inline-block;
      font-size: 18px;
      color: #999999;
      margin-top: 16px;
      cursor: pointer;
    }

    .d2 {
      margin-left: 60px;
      margin-right: 165px;
    }

    .qita {
      width: 270px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 35px;

      span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 22px;
        color: #999;
      }

      span:nth-child(3n) {
        margin-right: 0;
      }

      .s1 {
        width: 58px;
        height: 1px;
        background-color: #999;
      }
    }

    .wx {
      width: 46px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 35px;
      cursor: pointer;

      img {
        width: 46px;
        height: 46px;
      }

      p {
        font-size: 16px;
        color: #666;
        text-align: center;
        margin-top: 6px;
      }
    }
  }

  .con2 {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 991;

    .verify {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      /deep/.slide-verify-slider {
        border: 0;
        margin-top: -5px;
      }
    }
  }

  .motaikuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .verify {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.box {
  position: relative;
  width: 100%;
  padding-bottom: 200px;
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-bottom: 110px;
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .tit {
    height: 120px;
    display: flex;
    align-items: center;

    .tit_item {
      font-size: 26px;
      font-weight: 400;
      color: #333333;
      margin-right: 85px;
      cursor: pointer;
    }

    .active {
      font-size: 32px;
      font-weight: 600;
      color: #64b6a8;
    }
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
        border-radius: 10px;
      }

      .fwxm {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          font-size: 24px;
          cursor: pointer;
          font-weight: 600;
          color: #64b6a8;
        }

        .t_2 {
          font-size: 16px;
          color: #666666;
          margin-top: 12px;
        }
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          font-size: 24px;
          cursor: pointer;
          font-weight: 600;
        }

        .t_2 {
          font-size: 16px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 16px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 16px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            vertical-align: top;
            width: 31px;
            height: 31px;
            border-radius: 31px;
          }

          div {
            display: inline-block;
            //width: 90px;
            padding: 0px 5px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          //font-size: 32px;
          font-size: 30px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          //font-size: 18px;
          font-size: 16px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.zhong {
  position: relative;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #000;
  margin-top: 32px;
  padding-bottom: 20px;
  overflow: hidden;

  .kandian {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 330px;
    height: 220px;
    box-sizing: border-box;
    border: 1px solid #64b6a8;

    img {
      width: 330px;
      height: 52px;
      margin-top: -7px;
      margin-left: -1px;
    }

    .list {
      margin-top: 8px;
      margin-left: 20px;
      color: #000;
      height: 117px;
      overflow: hidden;

      .li {
        width: 287px;
        padding: 16px 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 20px;
        border-bottom: 1px solid #e0e0e0;
      }
    }

    .gengduo {
      position: absolute;
      bottom: 16px;
      right: 20px;
      color: #64b6a8;

      img {
        width: 16px;
        height: 16px;
        margin-top: -4px;
      }
    }
  }

  .swiper {
    width: 800px;
    height: 240px;
    display: inline-block;

    img {
      width: 360px;
      height: 240px;
    }
  }
}

.tou {
  position: relative;
  width: 100%;
  height: 300px;

  .tit {
    width: 100%;
    height: 100%;

    .ceng {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(178deg,
          #333333 0%,
          rgba(83, 83, 83, 0.53) 48%,
          #333333 100%);
      opacity: 0.74;
    }

    .tit_1 {
      width: 1200px;
      height: 100%;
      margin-left: 50%;
      transform: translateX(-50%);

      .div1 {
        position: absolute;
        left: 0;
        top: 30px;
        cursor: pointer;
      }

      .divdw {
        position: absolute;
        left: 200px;
        top: 30px;
        height: 40px;
        background-color: rgba(51, 51, 51, 0.46);
        border-radius: 25px;
        border: 1px solid #ffffff;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .divdw_img {
          width: 28px;
          height: 28px;
          margin-left: 12px;
        }

        .divdw_span {
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          margin-right: 10px;
        }
      }

      .div2 {
        position: absolute;
        left: 74px;
        top: 40px;
        font-size: 28px;

        color: #fff;
        cursor: pointer;
      }

      .div3 {
        position: absolute;
        left: 217px;
        top: 40px;
        width: 91px;
        height: 40px;
        background: rgba(51, 51, 51, 0.46);
        border: 1px solid #ffffff;
        border-radius: 25px;
        text-indent: 40px;
        line-height: 40px;
        font-size: 20px;
        z-index: 9;
        cursor: pointer;

        img {
          position: absolute;
          left: 12px;
          top: 5px;
          width: 28px;
          height: 28px;
        }
      }

      .div4 {
        cursor: pointer;
        position: absolute;
        font-size: 18px;
        top: 48px;
        right: 0;
        display: flex;

        img {
          cursor: pointer;
          width: 26px;
          height: 26px;
          margin-right: 10px;
        }

        //cursor: pointer;
      }

      .div5 {
        //position: absolute;
        width: 26px;
        height: 26px;
        //top: 47px;
        //left: 1080px;
        cursor: pointer;
        border-radius: 26px;
      }

      .div6 {
        position: absolute;
        top: 170px;
        left: 250px;
        font-size: 20px;

        span {
          margin-right: 40px;
          cursor: pointer;
        }
      }

      .div7 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 35px;
        width: 700px;
        height: 55px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 18px;
        overflow: hidden;

        input {
          width: 480px;
          height: 55px;
          line-height: 55px;
          text-indent: 16px;
          font-size: 18px;
        }

        img {
          width: 25px;
          height: 25px;
          margin-left: 20px;
          cursor: pointer;
        }

        p {
          position: absolute;
          top: 0;
          right: 0;
          width: 80px;
          height: 55px;
          background-color: #64b6a8;
          text-align: center;
          line-height: 55px;
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
  }

  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #64b6a8;
}

.swiper {
  position: relative;
  display: inline-block;
  width: 800px;
  height: 260px;
  // overflow: hidden;
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}

.t_1_1 {
  position: absolute !important;
  width: 130px;
  left: 120px;
  height: 58px;
  top: 30px;
  z-index: 999999;
}

.duibi {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.64);
  cursor: pointer;

  p {
    position: absolute;
    width: 130px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    color: #fff;
    border: 2px solid #ffffff;
    font-size: 21px;
  }
}

.downapp {
  &:hover .erweima-wrap {
    opacity: 1;
    transform: translateY(0%);
    height: auto;
    width: auto;
    overflow: visible;
  }
}

.erweima-wrap {
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(-10%);
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
  left: 0%;
  top: 46px;
  z-index: 9999999;
  margin-left: 0 !important;
}

.erweima {
  background-color: #f7f0f0;
  border: 1px solid #e0e0e0;
  padding: 20px;
  border-radius: 5px;
  display: flex !important;
  margin-left: 0 !important;

  //   margin-right: 10px !important;
  div {
    &:not(:last-child) {
      margin-right: 10px !important;
    }

    z-index: 99999;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    margin-left: 0 !important;

    img {
      width: 150px !important;
      height: 150px !important;
    }

    span {
      color: #000;
    }
  }
}
</style>
